
<template>
<!--   :data 绑定模型数据里的数据
      style="width: 100%" 表格宽度占网页的宽度比例100%
      prop="date" 绑定data里面的数据
      border 表格边框
-->
      <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="120">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="birthday"-->
<!--          label="生日"-->
<!--          width="120">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
      </el-table>

<!--        <el-switch-->
<!--          v-model="value"-->
<!--          active-color="#13ce66"-->
<!--          inactive-color="#ff4949">-->
<!--        </el-switch>-->
      </div>
</template>


<script>
import axios from "axios";

import mock from "../js/user.js";

export default {
  data() {
    return {
      //给全局模板
      tableData: [],
      // value: true
    }
  },
    methods: {

    },
  //钩子函数
  mounted() {
    //当前vue组件页面发送axiaos(ajax)请求。url 请求地址。data 请求分页的参数。
    //.then(成功。result就有后端查询到的结果)
    // axios.post("/user/list",{"currentPage":1,"pageSize":10})
    //   .then(result =>{
    //     //第一个data就是分页条数加数据rows。第二个data就是rows
    //     let list = result.data.data;
    //     console.log(list)
    //     //把查询出来的数据赋值给表格
    //     this.tableData = list;
    //   }).catch(result =>{
    //   console.log(result)
    // })
    this.$http.get("/dept/list",{"currentPage":1,"pageSize":10})
      .then(result =>{
        //第一个data就是分页条数加数据rows。第二个data就是rows
        let list = result.data.rows;
        console.log(list)
        //把查询出来的数据赋值给表格
        this.tableData = list;
      }).catch(result =>{
      console.log(result)
    })
  },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
